<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQ版的烟花</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 700px;
            height: 500px;
            /* border: 1px solid red; */
            background: #000;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }
        .ball{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            bottom: 0;
        
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script src="./js/jquery.3.5.1.js"></script>
    <script>
        $(function(){
            
            // 点击创建烟花
            $('#box').click(function(e){

                // 创建
                var $span = $('<div></div>');
                // 插入
                $('#box').append($span);
                // 添加类名、样式、动画
                $span.addClass('ball').css({
                    backgroundColor: function(){
                        return '#' + Math.round(parseInt('ffffff',16) * Math.random()).toString(16).padStart(6,'0')
                    },
                    left:e.offsetX
                })
                .animate({
                    top:e.offsetY
                },function(){
                    // 移除
                    $span.remove();

                    // 初始化角度、半径
                    var deg = 0;        
                    var r = 100;
                    // 创建烟花群
                    for(var i=0;i<20;i++){
                        // 随机色
                        let rc = '#' + Math.round(parseInt('ffffff',16) * Math.random()).toString(16).padStart(6,'0');

                        // 目标值
                        deg += 18;
                        var target_x = Math.round(Math.cos(Math.PI/180*deg)*r);
                        var target_y = Math.round(Math.sin(Math.PI/180*deg)*r);

                        // 创建
                        let $span = $('<div></div>');
                        $('#box').append($span);
                        $span.addClass('ball').css({
                            left:e.offsetX,
                            top:e.offsetY,
                            backgroundColor: rc,
                        })
                        .animate({
                            left:target_x + e.offsetX,
                            top:target_y + e.offsetY
                        },function(){
                            $span.remove();
                        })
                    }
                })
            })
        })
    </script>
</body>
</html>